<script setup lang="ts">
import {ref} from "vue";

const props = defineProps<{ userInfo: {}, show: boolean }>()
const emit = defineEmits<{ (e: 'changeShow', show: boolean): void }>()
const userName = ref('')
const userProfile = ref('')
setTimeout(() => {
  userName.value = props.userInfo.userName;
  userProfile.value = props.userInfo.userProfile;
},1000)
const updateInfo = (info) => {
  console.log(info)
}
</script>

<template>
  <div class="card" v-show="show">
    <div class="close" @click="emit('changeShow', false)">
      <icon-close/>
    </div>
    <div class="content">
      <div class="back">
        <div class="back-content">
          <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
               width="100" height="100">
            <path
                d="M812 892H212c-71.68 0-130-58.32-130-130V262c0-71.68 58.32-130 130-130h600c71.68 0 130 58.32 130 130v500c0 71.68-58.32 130-130 130zM212 192c-38.59 0-70 31.41-70 70v500c0 38.59 31.41 70 70 70h600c38.59 0 70-31.41 70-70V262c0-38.59-31.41-70-70-70H212z"
                fill="#ffffff"></path>
            <path
                d="M792 422H592c-16.56 0-30-13.43-30-30s13.44-30 30-30h200c16.56 0 30 13.43 30 30s-13.44 30-30 30zM792 542H592c-16.56 0-30-13.43-30-30s13.44-30 30-30h200c16.56 0 30 13.43 30 30s-13.44 30-30 30zM792 662H592c-16.56 0-30-13.44-30-30s13.44-30 30-30h200c16.56 0 30 13.44 30 30s-13.44 30-30 30z"
                fill="#ffffff"></path>
            <path
                d="M352 585.75c-67.21 0-121.88-54.67-121.88-121.88S284.79 342 352 342s121.88 54.67 121.88 121.88S419.21 585.75 352 585.75zM352 402c-34.12 0-61.88 27.75-61.88 61.88s27.75 61.88 61.88 61.88 61.88-27.75 61.88-61.88S386.12 402 352 402z"
                fill="#ffffff"></path>
            <path
                d="M492.01 682c-8.27 0-16.49-3.4-22.42-10.06-29.87-33.57-72.72-52.83-117.59-52.83s-87.71 19.26-117.59 52.83c-11.03 12.38-29.96 13.46-42.35 2.48-12.37-11.02-13.49-29.98-2.47-42.36 41.24-46.37 100.44-72.95 162.41-72.95s121.17 26.58 162.41 72.95c11.02 12.38 9.9 31.35-2.47 42.36a29.903 29.903 0 0 1-19.93 7.58z"
                fill="#ffffff"></path>
          </svg>
          <strong>悬停查看详情</strong>
        </div>
      </div>
      <div class="front">

        <div class="img">
          <div class="circle">
          </div>
          <div class="circle" id="right">
          </div>
          <div class="circle" id="bottom">
          </div>
        </div>

        <div class="front-content">
          <small class="badge text-xl mb-2">
            昵称：
            <a-input class="badge bg-opacity-0"
                     size="large"
                     :model-value="userName"
                     placeholder="修改昵称"
                     allow-clear
                     @blur="updateInfo(userName)"
            />
          </small>
          <small class="badge text-xl">
            个人简介：
            <a-input class="badge"
                     :model-value="userProfile"
                     placeholder="修改个人简介"
                     allow-clear
                     @blur="updateInfo(userProfile)"
            />
          </small>
          <div class="description">
            <div class="title">
              <p class="title">

              </p>
            </div>
            <p class="card-footer">
              <a-tag color="cyan" class="mr-4" bordered>最近上线</a-tag>
              <a-tag color="cyan" bordered>1 条消息</a-tag>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.card {
  position: absolute;
  top: 10%;
  left: 20%;
  z-index: 10;
  overflow: visible;
  width: 60%;
  height: 60vh;
}

.content {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 300ms;
  box-shadow: 0px 0px 10px 1px #000000ee;
  border-radius: 5px;
}

.front, .back {
  background-color: #151515;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 5px;
  overflow: hidden;
}

.back {
  width: 100%;
  height: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.back::before {
  position: absolute;
  content: ' ';
  display: block;
  width: 160px;
  height: 220%;
  background: linear-gradient(90deg, transparent, #ff9966, #ff9966, #ff9966, #ff9966, transparent);
  animation: rotation_481 5000ms infinite linear;
}

.back-content {
  position: absolute;
  width: 99%;
  height: 99%;
  background-color: #151515;
  border-radius: 5px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.card:hover .content {
  transform: rotateY(180deg);
}

@keyframes rotation_481 {
  0% {
    transform: rotateZ(0deg);
  }

  0% {
    transform: rotateZ(360deg);
  }
}

.front {
  transform: rotateY(180deg);
  color: white;
}

.front .front-content {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.front-content .badge {
  height: fit-content;
  background-color: #00000055;
  padding: 2px 10px;
  border-radius: 10px;
  backdrop-filter: blur(2px);
  width: fit-content;
  color: white;
}

.description {
  box-shadow: 0px 0px 10px 5px #00000088;
  width: 100%;
  height: 80%;
  padding: 10px;
  background-color: #00000099;
  backdrop-filter: blur(5px);
  border-radius: 5px;
}

.title {
  font-size: 18px;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
}

.title p {
  width: 50%;
}

.card-footer {
  color: #ffffff88;
  margin-top: 5px;
  font-size: 14px;
}

.front .img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #ffbb66;
  position: relative;
  filter: blur(15px);
  animation: floating 2600ms infinite linear;
}

#bottom {
  background-color: #ff8866;
  left: 50px;
  top: 0px;
  width: 150px;
  height: 150px;
  animation-delay: -800ms;
}

#right {
  background-color: #ff2233;
  left: 160px;
  top: -80px;
  width: 30px;
  height: 30px;
  animation-delay: -1800ms;
}

.close {
  position: relative;
  z-index: 11;
  color: white;
  width: 24px;
  top: 3vh;
  left: 58vw;
  cursor: pointer;
  font-size: 18px;
}

.close:hover {
  color: #ff2233;
  animation: rotation 1s;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes floating {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0px);
  }
}
</style>